<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{$cfg.name}</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="{$assets_path}/style.css">
<link rel="stylesheet" href="{$assets_path}/zui.lite.min.css">
<link rel="stylesheet" href="{$assets_path}/zui-theme.min.css">
<script src="{$assets_path}/jquery.min.js" charset="utf-8"></script>
<script src="{$assets_path}/app.js" charset="utf-8"></script>
<script src="{$assets_path}/vue.min.js" charset="utf-8"></script>
</head>

<body>
  <div id="vm" class="padding container">
    
    <div class="row padding ">
      <div class="col-md-6">
        <table class="table table-hover table-striped">
          <thead>
            <tr>
              <th colspan="5">
                {$local_host}
                <a @click="search('/')" href="#" >/</a>
                <template v-for="(vo,idx) in locals.paths">
                  <a href="#" @click="search(vo.path)" >{{vo.name}}</a>/
                </template>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(vo,idx) in locals.list">
              <td>{{vo.type}}</td>
              <td>
                <template v-if="vo.dir == 1">
                  <a @click="search(vo.virtual_path)" >{{vo.name}}</a>
                </template>
                <template v-else>
                  {{vo.name}}
                </template>
                
              </td>
              <td>
                {{vo.utime}}
                <template v-if="vo.dif == 1">
                  <small class="text-red">
                    <br />
                    {{vo.rutime}}
                  </small>
                </template>
              </td>
              <td>
                {{vo.size}}
                <template v-if="vo.dif == 1">
                  <small class="text-red">
                    <br />
                    {{vo.rsize}}
                  </small>
                </template>
              </td>
              <td>
                <template v-if="vo.dif == 1">
                  <a @click="down(vo)" href="#">下载</a>
                  <a @click="up(vo)" href="#">上传</a>
                </template>

              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="3">{$local_host}</th>
            </tr>
          </tfoot>
        </table>

        
      </div>
      <div class="col-md-6">
        <table class="table table-hover table-striped">
          <thead>
            <tr>
              <th colspan="5">
                {$remote_host}
                <a @click="search('/')" href="#" >/</button>
                <template v-for="(vo,idx) in locals.paths">
                  <a href="#" @click="search(vo.path)" >{{vo.name}}</a>/
                </template>
              </th>
            </tr>
          </thead>
          
          <tbody>
            
            <tr v-for="(vo,idx) in remotes.list">
              <td>{{vo.type}}</td>
              <td>
                <template v-if="vo.dir == 1">
                  <a @click="search(vo.virtual_path)" >{{vo.name}}</a>
                </template>
                <template v-else>
                  {{vo.name}}
                </template>
                
              </td>
              <td>{{vo.utime}}</td>
              <td>{{vo.size}}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="3">{$remote_host}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    
  </div>
</body>
</html>

<script type="text/javascript">
$(function(){
  var vm  =  new Vue({
    el:"#vm",
    data:{
      remotes:{
        list:[],
        path:'',
        paths:[],
      },
      locals:{
        list:[],
        path:'',
        paths:[],
      },
      post:{
        path:'',
      }
    },
    methods:{
      search:function(dir){
        $.app.post({
          url:"{:url('suite/syncfile/sync')}",
          data:{path:dir},
          success:function(code,msg,r){
            vm.locals = r.locals;
            vm.remotes = r.remotes;
          }
        })
      },
      down:function(vo){
        $.app.post({
          url:"{:url('suite/syncfile/down')}",
          data:{path:vo.virtual_path},
          success:function(code,msg,r){
          }
        })
      },
      up:function(vo){
        $.app.post({
          url:"{:url('suite/syncfile/up')}",
          data:{path:vo.virtual_path},
          success:function(code,msg,r){
          }
        })
      },
    }
  })
  vm.search();
})  
</script>



